<template>
    <div class="app">
      <!--头部  header-->



        <!--<div class="mui-content">-->
            <!--<ul class="mui-table-view mui-table-view-chevron">-->
                <!--<li id="switch" class="mui-table-view-cell">-->
                    <!--定时轮播-->
                    <!--<div class="mui-switch">-->
                        <!--<div class="mui-switch-handle"></div>-->
                    <!--</div>-->
                <!--</li>-->
            <!--</ul>-->
        <!--</div>-->
        <!--<div id="slider" class="mui-slider" >-->
            <!--<div class="mui-slider-group mui-slider-loop">-->
                <!--&lt;!&ndash; 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) &ndash;&gt;-->
                <!--<div class="mui-slider-item mui-slider-item-duplicate">-->
                    <!--<a href="#">-->
                        <!--<img src="../images/yuantiao.jpg">-->
                    <!--</a>-->
                <!--</div>-->
                <!--&lt;!&ndash; 第一张 &ndash;&gt;-->
                <!--<div class="mui-slider-item">-->
                    <!--<a href="#">-->
                        <!--<img src="../images/shuijiao.jpg">-->
                    <!--</a>-->
                <!--</div>-->
                <!--&lt;!&ndash; 第二张 &ndash;&gt;-->
                <!--<div class="mui-slider-item">-->
                    <!--<a href="#">-->
                        <!--<img src="../images/muwu.jpg">-->
                    <!--</a>-->
                <!--</div>-->
                <!--&lt;!&ndash; 第三张 &ndash;&gt;-->
                <!--<div class="mui-slider-item">-->
                    <!--<a href="#">-->
                        <!--<img src="../images/cbd.jpg">-->
                    <!--</a>-->
                <!--</div>-->
                <!--&lt;!&ndash; 第四张 &ndash;&gt;-->
                <!--<div class="mui-slider-item">-->
                    <!--<a href="#">-->
                        <!--<img src="../images/yuantiao.jpg">-->
                    <!--</a>-->
                <!--</div>-->
                <!--&lt;!&ndash; 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) &ndash;&gt;-->
                <!--<div class="mui-slider-item mui-slider-item-duplicate">-->
                    <!--<a href="#">-->
                        <!--<img src="../images/shuijiao.jpg">-->
                    <!--</a>-->
                <!--</div>-->
            <!--</div>-->
            <!--<div class="mui-slider-indicator">-->
                <!--<div class="mui-indicator mui-active"></div>-->
                <!--<div class="mui-indicator"></div>-->
                <!--<div class="mui-indicator"></div>-->
                <!--<div class="mui-indicator"></div>-->
            <!--</div>-->
        <!--</div>-->

        <mt-header fixed title="2017  软件   5班"></mt-header>
        <!--中间  内容部分-->
       <transition>
           <router-view></router-view>
       </transition>
      <!--tabbar  底部导航-->
        <nav class="mui-bar mui-bar-tab">
            <router-link class="mui-tab-item " to="/home">
                <span class="mui-icon mui-icon-home"></span>
                <span class="mui-tab-label">首页</span>
            </router-link>
            <router-link class="mui-tab-item" to="/member">
                <span class="mui-icon mui-icon-contact"></span>
                <span class="mui-tab-label">用户</span>
            </router-link>
            <router-link class="mui-tab-item" to="/cart">
                <span class="mui-icon mui-icon-extra mui-icon-extra-cart"><span class="mui-badge">9</span></span>
                <span class="mui-tab-label">购物车</span>
            </router-link>
            <router-link class="mui-tab-item" to="/search">
                <span class="mui-icon mui-icon-search"></span>
                <span class="mui-tab-label">搜索</span>
            </router-link>
        </nav>
    </div>
</template>
<script>

</script>
<style lang="scss" scoped>
  .app{
      padding-top: 50px;
      overflow-x: hidden;
  }
  .v-enter{
        opacity: 0;
        transform: translateX(100%);
  }
  .v-enter,.v-leave-to{
      opacity: 0;
      transform: translateX(-100%);
  }
  .v-enter-active,.v-leave-active{
        opacity: 0;
        transition: all 0.5s ease;
  }
</style>
